import { Outlet, Link, useLocation } from 'react-router-dom';
import { useState } from 'react';
import ThemeToggle from './ThemeToggle';

function Layout() {
  const [error] = useState(null);
  const location = useLocation();

  const isActive = (path) => {
    if (path === '/home' && location.pathname === '/') {
      return true;
    }
    return location.pathname === path;
  };

  if (error) {
    return <div>出错了：{error.message}</div>;
  }

  return (
    <div>
      <div className="nav-container">
        <div className="nav-content">
          <Link to="/" className="nav-logo">
            Fly Products
          </Link>
          {/* 移动端导航 */}
          <nav className="mobile-only">
            <ul className="nav-menu">
              <li>
                <Link to="/home" className={`nav-link ${isActive('/home') ? 'active' : ''}`}>
                  首页
                </Link>
              </li>
              <li>
                <Link
                  to="/products"
                  className={`nav-link ${isActive('/products') ? 'active' : ''}`}
                >
                  产品
                </Link>
              </li>
              <li>
                <Link to="/about" className={`nav-link ${isActive('/about') ? 'active' : ''}`}>
                  关于
                </Link>
              </li>
            </ul>
          </nav>
          {/* 桌面端导航 */}
          <nav className="desktop-only">
            <ul className="nav-menu">
              <li>
                <Link to="/home" className={`nav-link ${isActive('/home') ? 'active' : ''}`}>
                  首页
                </Link>
              </li>
              <li>
                <Link
                  to="/products"
                  className={`nav-link ${isActive('/products') ? 'active' : ''}`}
                >
                  产品
                </Link>
              </li>
              <li>
                <Link to="/about" className={`nav-link ${isActive('/about') ? 'active' : ''}`}>
                  关于
                </Link>
              </li>
            </ul>
          </nav>
        </div>
      </div>

      <div className="responsive-container">
        <main className="mt-4 sm:mt-6 lg:mt-8">
          <Outlet />
        </main>
      </div>

      <ThemeToggle />
    </div>
  );
}

export default Layout;
